<template>
	<view class="content">
		<!-- tab栏 -->
		<!-- <view class="ffffff paddinglr"> -->
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabList" @click="change" lineColor="rgba(243, 39, 28, 1)" :activeStyle="{
				    color: '#000000',
				    fontWeight: 800,
				    transform: 'scale(1.05)'}" :inactiveStyle="{
				    color: '#666666',
				    transform: 'scale(1)'
				}"></u-tabs>
		</u-sticky>
		<!-- </view> -->
		<!-- 商家 -->
		<view class="fafafa padding" v-if="tabActive==0">
			<view class="teacherBox padding border_2 margin_bottom3" v-for="(item,index) in list.data" :key="item.id"
				@click="goServiceInfo(item.relation_id)" v-if="item.service&&item.service.publisher">
				<view class="flex" >
					<view class="left">
						<image :src="item.service.publisher.avatar" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="name margin_bottom2">
							{{item.service.publisher.nickname}}
						</view>
						<text class="margin_bottom2 cate">
							#{{item.service.tag.name}}
						</text>
						<view class="flexbetween">
							<view class="price">
								￥{{item.service.price}}
							</view>
							<view class="button">
								聊一聊
							</view>
						</view>
					</view>
					<view>
						<view class="trade" v-if="item.service.publisher.service_state==1">
							营业中
						</view>
						<view class="rest" v-if="item.service.publisher.service_state==0">
							休息中
						</view>
					</view>
				</view>
				<!-- <view v-else>
					<view class="flexbetween">
						<image style="width: 100rpx;height: 32rpx;" src="../static/image/mine/expired.png" mode="">
						</image>
						<view class="flexbetween">
							<image class="imgStar" src="/static/image/home/star-fill.png" mode=""
								@click.stop="collect(item.service.id,1,'')"></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 视频 -->
		<view class="fafafa padding" v-if="tabActive==1">
			<view class="ffffff margin_bottom3 border_2 padding" v-for="item in list.data" :key="item.id"
				@click="goVideoInfo(item.relation_id,item.is_del)">
				<view v-if="item.community&&item.community.publisher">
					<!-- 横向 -->
					<view class="video margin_bottom3" v-if="item.community.format==0">
						<image :src="item.community.image_text" mode="widthFix"></image>
					</view>
					<!-- 竖向 -->
					<view class="videoFormat margin_bottom3" :style="{backgroundImage:`url(${item.community.image_text})`}"
						v-if="item.community.format==1"></view>
					<view class=" color_ling text_a">
						{{item.community.title}}
					</view>
					<view class="margin_top1" v-if="item.is_del==1">
						<view class="color_san text_a delBox">已失效</view>
					</view>
					<view class="margin_top flexbetween">
						<view class="flexleft">
							<view class="sculpture">
								<image :src="item.community.publisher.avatar" mode="widthFix"></image>
							</view>
							<view class="nickName">
								{{item.community.publisher.nickname}}
							</view>
						</view>
						<view class="flexleft">
							<view @click.stop="collect(item.relation_id,2,1)">
								<u-icon name="star-fill" color="rgba(255, 122, 0, 1)" size="14"></u-icon>
							</view>
							<view class="collect">{{item.community.collect_num}}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="flexbetween">
						<image style="width: 100rpx;height: 32rpx;" src="../static/image/mine/expired.png" mode="">
						</image>
						<!-- <view class="color_san text_a delBox">已失效</view> -->
						<!-- 数据失效取消收藏 -->
						<view class="flexbetween">
							<image class="imgStar" src="/static/image/home/star-fill.png" mode=""
								@click.stop="collect(item.relation_id,2,1)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 展示 -->
		<view class="fafafa padding" v-if="tabActive==2">
			<view class="ffffff margin_bottom3 border_2 padding word_wrap" v-for="item in list.data" :key="item.id"
				@click="goForumInfo(item.relation_id,1,item.is_del)">
				<view v-if="item.community&&item.community.publisher">
					<view class="flexstart">
						<view style="margin-right: 20rpx;">
							<view class="image_ya">
								<image :src="item.community.publisher.avatar" mode="widthFix"></image>
							</view>
						</view>
						<view>
							<view class="text_g color_ling">
								{{item.community.publisher.nickname}}
							</view>
							<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
						</view>
					</view>
					<view class="margin_top4 text_w color_ling">
						{{item.community.title}}
					</view>
					<view class="margin_top2 text_w color_ling" style="font-weight: 400;">
						{{item.community.description}}
					</view>
					<view class=" margin_top" v-if="item.is_del==1">
						<view class="color_san text_a delBox">已失效</view>
					</view>
					<view class="margin_top1 flexleft flex_wrap">
						<view class="forumBox" v-for="(value,i) in item.community.images_arr" :key="i"
							@click.stop="lbtpriview(i,item.community.images_arr,2)">
							<image :src="value" mode="widthFix"></image>
						</view>
					</view>
					<view class="forumButton flexbetween">
						<image class="imgForward" src="/static/image/home/forward.png" mode=""
							@click.stop="goShare(item,1)"></image>
						<view class="flexleft">
							<view class="margin_right3">
								<!-- 评论 -->
								<!-- <view class="flexbottom">
									<u-icon name="chat" color="rgba(153, 153, 153, 1)" size="14"></u-icon>
									<view class="text_f color_jiu">62</view>
								</view> -->
								<!-- 评论 -->
								<!-- <view class="flexleft">
									<image class="imgComment margin_right1" src="/static/image/home/comment.png"
										mode="widthFix"></image>
									<image class="imgComment margin_right1" src="/static/image/home/comment.png" mode="widthFix"></image>
									<view class="text_f color_jiu">62</view>
								</view> -->
							</view>
							<view class="margin_right3">
								<view class="flexbottom">
									<!-- 未点赞 -->
									<image class="imgLike margin_right1" src="/static/image/home/like.png" mode=""
										v-show="!item.community.is_like" @click.stop="like(item.relation_id)">
									</image>
									<!-- 已点赞 -->
									<image class="imgLike margin_right1" src="/static/image/home/like-fill.png" mode=""
										v-show="item.community.is_like" @click.stop="like(item.relation_id)"></image>
									<view class="text_f color_jiu" v-if="item.community">{{item.community.like_num}}</view>
								</view>
							</view>
							<view>
								<view class="flexbottom">
									<image class="imgStar margin_right1" src="/static/image/home/star-fill.png" mode=""
										@click.stop="collect(item.relation_id,2,2)"></image>
									<view class="text_f color_jiu" v-if="item.community">{{item.community.collect_num}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="flexbetween">
						<image style="width: 100rpx;height: 32rpx;" src="../static/image/mine/expired.png" mode="">
						</image>
						<!-- <view class="color_san text_a delBox">已失效</view> -->
						<!-- 数据失效取消收藏 -->
						<view class="flexbetween">
							<image class="imgStar" src="/static/image/home/star-fill.png" mode=""
								@click.stop="collect(item.relation_id,2,2)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 打赏抢答 -->
		<view class="fafafa padding" v-if="tabActive==3">
			<view class="ffffff margin_bottom3 border_2 padding word_wrap" v-for="item in list.data" :key="item.id"
				@click="goForumInfo(item.relation_id,2,item.is_del)">
				<view v-if="item.community&&item.community.publisher">
					<view class="flexstart margin_bottom2">
						<view style="margin-right: 20rpx;">
							<view class="image_ya">
								<image :src="item.community.publisher.avatar" mode="widthFix"></image>
							</view>
						</view>
						<view>
							<view class="text_g color_ling">{{item.community.publisher.nickname}}</view>
							<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
						</view>
					</view>
					<view>
						<view class="flexbetween margin_top2">
							<view class="reward">
								标金：{{item.community.price}}元
							</view>
							<view class="year text_a  color_jiu">截止时间：{{item.community.expiretime_text}}</view>
						</view>
						<view class="margin_top4 text_w color_ling">
							{{item.community.title}}
						</view>
						<view class="margin_top2 text_w color_ling" style="font-weight: 400;">
							{{item.community.description}}
						</view>
						<view class="margin_top" v-if="item.is_del==1">
							<view class="color_san text_a delBox">已失效</view>
						</view>
						<view class="margin_top1 flexleft flex_wrap">
							<view class="forumBox" v-for="(value,i) in item.community.images_arr" :key="i"
								@click.stop="lbtpriview(i,item.community.images_arr,2)">
								<image :src="value" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="forumButton flexbetween">
						<image class="imgForward" src="/static/image/home/forward.png" mode=""
							@click.stop="goShare(item,2)"></image>
						<view class="flexleft">
							<view class="margin_right3">
								<!-- 评论 -->
								<view class="flexleft">
									<image class="imgComment margin_right1" src="/static/image/home/comment.png" mode="">
									</image>
									<view class="text_f color_jiu">{{item.community.comment_num}}</view>
								</view>
							</view>
							<view class="margin_right3">
								<view class="flexbottom">
									<!-- 未点赞 -->
									<image class="imgLike margin_right1" src="/static/image/home/like.png" mode=""
										v-show="!item.community.is_like" @click.stop="like(item.relation_id)"></image>
									<!-- 已点赞 -->
									<image class="imgLike margin_right1" src="/static/image/home/like-fill.png" mode=""
										v-show="item.community.is_like" @click.stop="like(item.relation_id)"></image>
									<view class="text_f color_jiu">{{item.community.like_num}}</view>
								</view>
							</view>
							<view>
								<view class="flexbottom">
									<image class="imgStar margin_right1" src="/static/image/home/star-fill.png" mode=""
										@click.stop="collect(item.relation_id,2,3)"></image>
									<view class="text_f color_jiu">{{item.community.collect_num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="flexbetween">
						<image style="width: 100rpx;height: 32rpx;" src="../static/image/mine/expired.png" mode="">
						</image>
						<!-- <view class="color_san text_a delBox">已失效</view> -->
						<!-- 数据失效取消收藏 -->
						<view class="flexbetween">
							<image class="imgStar" src="/static/image/home/star-fill.png" mode=""
								@click.stop="collect(item.relation_id,2,3)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexcenter placeholderBoxTop" v-if="!list.data.length">
			<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
		</view>
		<u-popup :show="shareShow" round="20" mode="center" @close="shareShow=false">
			<view class="popupBoxShare">
				<view class="flexbetween">
					<view class="text margin_right7" @click="wxShareFriends">
						<image class="imgBox" src="/static/image/home/weixin.png" mode="widthFix"></image>
						<view class="text_b color_ling margin_top2">微信好友</view>
					</view>
					<view class="text">
						<image class="imgBox" src="/static/image/home/QQ.png" mode="" @click="qqShareFriends">
						</image>
						<view class="text_b color_ling margin_top2">QQ好友</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabActive: 0,
				tabList: [{
					name: "商家"
				}, {
					name: "视频"
				}, {
					name: "展示"
				}, {
					name: "打赏抢答"
				}],
				page: 1,
				list: {
					data: []
				},
				shareShow: false, //分享
				shareInfo: {}, //分享信息
				forumType: 0, //类型
			}
		},
		onLoad() {

		},
		onShow() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this
				httpRequest.request("/api/user/mycollects", 'GET', {
					page: page || 1,
					type: _this.tabActive == 0 ? 1 : _this.tabActive + 3
				}, false, false, true).then(res => {
					console.log(res);
					if (res.code == 1) {
						if (_this.tabActive == 1) {
							res.data.data.forEach((item, index) => {
								uni.getImageInfo({
									src: item.community.image_text,
									success(image) {
										if (Number(image.width) > Number(image.height)) { //横向
											_this.$set(item.community, "format", 0)
										} else { //竖向
											_this.$set(item.community, "format", 1)
										}
										console.log(image.width, index);
										console.log(image.height, index);
									}
								});
							})
						}
						
						
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			change(e) { //tab栏切换
				this.tabActive = e.index
				console.log(this.tabActive)
				this.init()
			},
			collect(id, ctype,type) { //取消收藏
			console.log(id,ctype,type);
			// return
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				let url = "/api/community/collects",
					method = "GET",
					data = {
						community_id: id,
						type
					};
				if (ctype == 1) { //商家
					url = "/api/service/collect"
					method = "POST"
					data = {
						id
					};
				} else { //视频、展示、打赏抢答
					url = "/api/community/collects"
					method = "GET"
					data = {
						community_id: id,
						type
					};
				}
				httpRequest.request(url, method, data).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						this.init()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			like(id) { //点赞、取消点赞
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/likes', 'GET', {
					community_id: id,
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						this.init()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			goServiceInfo(id) { //服务详情
				uni.navigateTo({
					url: "/pages_index/serviceInfo?id=" + id
				})
			},
			goVideoInfo(id, is_del) { //视频详情
				if (is_del == 1) {
					httpRequest.toast("已失效");
					return false
				}
				uni.navigateTo({
					url: "/pages_index/videoInfo?id=" + id
				})
			},
			goForumInfo(id, type, is_del) { //展示、打赏抢答详情
				if (is_del == 1) {
					httpRequest.toast("已失效");
					return false
				}
				uni.navigateTo({
					url: "/pages_index/forumInfo?id=" + id + "&type=" + type
				})
			},
			lbtpriview(index, value, type) {
				let i; //获取当前页面的轮播图数据
				if (type == 1) {
					i = [value]
				} else {
					i = value
				}
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true, //循环预览只在APP生效
				})
			},
			goShare(item, type) { //转发
				this.shareShow = true
				this.shareInfo = item
				this.forumType = type
			},
			addShare(community_id) { //增加转发量
				console.log("调用了！！！")
				let _this = this;
				httpRequest.request('/api/community/shares', 'POST', {
					community_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast("分享成功！");
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			wxShareFriends() { //微信分享
				let _this = this
				let shareInfo = _this.shareInfo
				uni.share({
					provider: "weixin",
					type: 0,
					title: shareInfo.community.title || "",
					href: `https://hongnwh.yuntaiqikeji.com/h5/#/?id=${shareInfo.community.id}&type=${_this.forumType}`,
					scene: "WXSceneSession",
					summary: shareInfo.community.description || "",
					imageUrl: "https://hongnwh-1318979827.cos.ap-shanghai.myqcloud.com/uploads/20230803/49aef582328737659ba0ef126c7de37a.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						console.log(_this.shareInfo, "shareInfo")
						_this.addShare(shareInfo.community.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			qqShareFriends() { //QQ分享
				let _this = this
				let shareInfo = _this.shareInfo
				console.log(JSON.stringify(shareInfo), "shareInfo")
				let url = `https://hongnwh.yuntaiqikeji.com/h5/#/?id=${shareInfo.community.id}&type=${_this.forumType}`
				uni.share({
					provider: "qq",
					type: 1,
					title: shareInfo.community.title || "",
					href: url,
					summary: shareInfo.community.description || "",
					imageUrl: "https://hongnwh-1318979827.cos.ap-shanghai.myqcloud.com/uploads/20230803/49aef582328737659ba0ef126c7de37a.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						_this.addShare(shareInfo.community.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.teacherBox {
		background-color: #ffffff;
		// padding: 36rpx 15rpx 36rpx 30rpx;
		// display: flex;
		position: relative;

		.left {
			width: 152rpx;
			height: 152rpx;
			border-radius: 21rpx 21rpx 21rpx 21rpx;
			margin-right: 30rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			flex: 1;

			.name {
				font-size: 30rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #000000;
			}

			.cate {
				width: 92rpx;
				height: 39rpx;
				line-height: 39rpx;
				text-align: center;
				background: rgba(243, 39, 28, .1);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #F3271C;
				white-space: nowrap;
			}

			.price {
				font-size: 26rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #F3271C;
			}

			.button {
				padding: 10rpx 35rpx;
				text-align: center;
				border: 2rpx solid rgba(243, 39, 28, 1);
				border-radius: 39rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #F3271C;
			}
		}

		// 营业中
		.trade {
			background: rgba(19, 196, 99, .1);
			border-radius: 0rpx 14rpx 0rpx 14rpx;
			padding: 7rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #13C463;
			position: absolute;
			top: 0;
			right: 0;
		}

		// 休息中
		.rest {
			background: rgba(255, 138, 2, .1);
			border-radius: 0rpx 14rpx 0rpx 14rpx;
			padding: 7rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF8A02;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.delBox {
		width: 100rpx;
		text-align: center;
		line-height: 50rpx;
		height: 50rpx;
		background-color: #f1f1f1;
		border-radius: 12rpx;
	}

	.video {
		height: 353rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
	}

	.videoFormat {
		height: 653rpx;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.imgBox {
		width: 100%;
		height: 353rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.imgComment {
		width: 34.71rpx;
		height: 34.71rpx;
		display: block;
	}

	.imgLike {
		width: 35rpx;
		height: 35rpx;
		display: block;
	}

	.imgStar {
		width: 34.88rpx;
		height: 34.88rpx;
		display: block;
	}

	.border_bottom_solid {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.03);
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.forumBox {
		width: 33.3%;
		height: 194rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;

		image {
			width: 193rpx;
			height: 100%;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}
	}


	.forumButton {
		margin-top: 65rpx;
	}

	.reward {
		min-width: 144rpx;
		box-sizing: border-box;
		background: rgba(243, 39, 28, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 5rpx 15rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.imgForward {
		width: 30.71rpx;
		height: 30.71rpx;
		display: block;
		margin-top: 10rpx;
	}

	.imgComment {
		width: 32.71rpx;
		height: 32.71rpx;
		display: block;
		margin-top: 2rpx;
	}

	.sculpture {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.nickName {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.collect {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 10rpx;
	}

	.popupBoxShare {
		padding: 100rpx 100rpx;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.imgBox {
			width: 112rpx;
			height: 112rpx;
		}
	}
</style>